<template>
    <NavBar></NavBar>
    <ContentField>
        <h2 style="text-align:center;">答题</h2>
        <h2><button style="width:15%;" class="btn btn-sm btn-info" @click="returnPre">返回</button></h2>

        <form @submit.prevent="answerPro">
        <div class="mb-3">
            <label for="id" class="form-label">&nbsp;&nbsp;题号(id): </label>
            <span type="text" class="form-control" id="id"> {{ id }} </span>
        </div>
        <div class="mb-3">
            <label for="content" class="form-label">&nbsp;&nbsp;题目描述(content): </label>
            <span type="text"  class="form-control" id="content">{{ content }}</span>
        </div>
        <div class="mb-3">
            <label for="answer" class="form-label">&nbsp;&nbsp;你的答案(answer): </label>
            <input type="text" v-model="answer" class="form-control" id="answer" required>
        </div>
        <div align="center">
            <span style="color:red; text-align:center; display:block;">{{ error_message }}</span>
            <button type="submit" class="btn btn-primary" style="width:20%;">提交</button>
        </div>
    </form>

    </ContentField>
</template>


<script>

//  前端进行测评：
//      学生用户输入答案之后,自动向后端发送ajax请求, 
//          如果正确, 则跳转到题集页面;
//          如果错误, 则返回答案错误提示
//

import NavBar from "@/components/student/NavBar/NavBar.vue";
import ContentField from '@/components/commons/ContentField.vue';
import {ref} from 'vue';
import $ from 'jquery';
import {useStore} from 'vuex';
import { useRoute } from 'vue-router';
import router from '@/router/index';
import emitter from "@/utils/bus.js";



export default{
    name: 'AnswerProView',
    components: {
        NavBar,
        ContentField,
    },
    setup(){

        const store = useStore();
        const route = useRoute();
        let content = ref('');
        let setId = ref('');

        let answer = ref('');
        let error_message = ref('');
        let id = route.params.id;

        const getProInfo = (id) => {

            $.ajax({
                url: "http://localhost:8090/sls/queryPro/getProInfoById/" + id,
                type: "get",
                headers: {
                Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){
                  //console.log(resp);
                  content.value = resp.content;
                  setId.value = resp.setId;
                },
                error(resp){
                    console.log(resp);
                 }
           });
        }

            getProInfo(id);

        const returnPre = () => {
            router.push({name: 'S_setProfile', params: {setId: setId.value}});
        }


        const answerPro = () => {  //进行测评

            $.ajax({
                url: "http://localhost:8090/sls/student/judge",
                type: "post",
                data: {
                    id: id,
                    answer: answer.value,
                },
                headers: {
                Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){
                    //console.log(resp);
                    if(resp.error_message === 'success'){

                        emitter.emit("isCorrect2SP", {id: id, correct: true});
                        router.push({name: 'S_setProfile', params: {setId: setId.value}});

                    }
                    else{
                        error_message.value = resp.error_message;
                    }
                },
                error(resp){
                    console.log(resp);
                 }
           });



        }


        return{
            id,

            content,
            setId,
            answer,

            error_message,

            returnPre,
            getProInfo,
            answerPro,
        }

    }
}

</script>